<template>
	<view class="car">
		<swiper class="com-center swiper">
			<swiper-item>
				<view class="swiper-item">
					<image src="../../../static/carnav.png" mode="widthFix" style="width: 100%;border-radius: 30rpx;"></image>
				</view>
			</swiper-item>
		</swiper>
		<view class="car-cont com-center">
			<view class="car-title flex">
				<dl :class="num==1?'indextitle':''" @click="num=1">
					<dt>全部</dt>
					<dd></dd>
				</dl>
				<dl :class="num==2?'indextitle':''" @click="num=2">
					<dt>洗车</dt>
					<dd></dd>
				</dl>
				<dl :class="num==3?'indextitle':''" @click="num=3">
					<dt>美容</dt>
					<dd></dd>
				</dl>
			</view>
			<view class="car-item" v-show="num==1">
				<!-- 内容标题 -->
				<view class="car-item-title flex">
					<view class="title-item flex" @click="titlenum=!titlenum">
						全部车型
						<view v-show="titlenum==0">
							<image src="../../../static/cartitle.png" mode="widthFix" style="width: 30rpx;margin: 5rpx;"></image>
						</view>
						<view v-show="titlenum==1">
							<image src="../../../static/carimg2.png" mode="widthFix" style="width: 30rpx;margin: 5rpx;"></image>
						</view>
					</view>
					<view class="title-item flex" @click="titlenum2=!titlenum2">
						全市
						<view v-show="titlenum2==0">
							<image src="../../../static/cartitle.png" mode="widthFix" style="width: 30rpx;margin: 5rpx;"></image>
						</view>
						<view v-show="titlenum2==1">
							<image src="../../../static/carimg2.png" mode="widthFix" style="width: 30rpx;margin: 5rpx;"></image>
						</view>
					</view>
					<view class="title-item flex" @click="titlenum3=!titlenum3">
						全部服务
						<view v-show="titlenum3==0">
							<image src="../../../static/cartitle.png" mode="widthFix" style="width: 30rpx;margin: 5rpx;"></image>
						</view>
						<view v-show="titlenum3==1">
							<image src="../../../static/carimg2.png" mode="widthFix" style="width: 30rpx;margin: 5rpx;"></image>
						</view>
					</view>
					<view class="title-item flex" @click="titlenum4=!titlenum4">
						营业状态
						<view v-show="titlenum4==0">
							<image src="../../../static/cartitle.png" mode="widthFix" style="width: 30rpx;margin: 5rpx;"></image>
						</view>
						<view v-show="titlenum4==1">
							<image src="../../../static/carimg2.png" mode="widthFix" style="width: 30rpx;margin: 5rpx;"></image>
						</view>
					</view>
				</view>
				<!-- 标题内容（下拉） -->
				<view class="title-cont" v-show="titlenum==1">
					<view class="title-conts flex">
						<view class="title-cont-item" :class="titlenum==1?'indextitles':''">
							全部
						</view>
						<view class="title-cont-item">
							五座轿车
						</view>
						<view class="title-cont-item">
							SUV/MPV
						</view>
					</view>
					<!-- 半透明 -->
					<view class="translucent" @click="titlenum=0"></view>
				</view>
				<!-- 全市（下拉） -->
				<view class="title-cont" v-show="titlenum2==1">
					<view class="title-conts flex">
						<view class="title-cont-item" :class="titlenum2==1?'indextitles':''">
							全市
						</view>
						<view class="title-cont-item">
							东平县
						</view>
						<view class="title-cont-item">
							肥城市
						</view>
						<view class="title-cont-item">
							宁阳县
						</view>
					</view>
					<!-- 半透明 -->
					<view class="translucent" @click="titlenum2=0"></view>
				</view>
				<!-- 内容 -->
				<view class="car-item-cont">
					<!-- 内容个体 -->
					<view class="cont-item">
						<view class="cont-items flex">
							<view class="cont-items-left">
								<image src="../../../static/carcont1.png" mode="widthFix" style="width: 130rpx;border-radius: 20rpx;margin-right: 20rpx;"></image>
							</view>
							<view class="cont-items-right">
								<view class="right-title">
									人和车改
								</view>
								<view class="right-cont flex">
									<text>1.37km</text>
									<image src="../../../static/vertical2.png" mode="widthFix" style="width: 30rpx;margin-top: 5rpx;"></image>
									<text>山东省泰安市岱岳区光彩路...</text>
								</view>
							</view>
						</view>
						<view class="cont-itemss flex">
							<view class="cont-itemss-left">
								标准洗车-五座轿车
							</view>
							<view class="cont-itemss-right flex">
								<view class="price flex">
									￥<view class="price-big">30</view>
								</view>
								<view class="buy">
									抢购
								</view>
							</view>
						</view>
						<view class="cont-itemss flex">
							<view class="cont-itemss-left">
								标准洗车-SUV/MPV
							</view>
							<view class="cont-itemss-right flex">
								<view class="price flex">
									￥<view class="price-big">40</view>
								</view>
								<view class="buy">
									抢购
								</view>
							</view>
						</view>
					</view>
					<!-- 2 -->
					<view class="cont-item">
						<view class="cont-items flex">
							<view class="cont-items-left">
								<image src="../../../static/carcont1.png" mode="widthFix" style="width: 130rpx;border-radius: 20rpx;margin-right: 20rpx;"></image>
							</view>
							<view class="cont-items-right">
								<view class="right-title">
									人和车改
								</view>
								<view class="right-cont flex">
									<text>1.37km</text>
									<image src="../../../static/vertical2.png" mode="widthFix" style="width: 30rpx;margin-top: 5rpx;"></image>
									<text>山东省泰安市岱岳区光彩路...</text>
								</view>
							</view>
						</view>
						<view class="cont-itemss flex">
							<view class="cont-itemss-left">
								标准洗车-五座轿车
							</view>
							<view class="cont-itemss-right flex">
								<view class="price flex">
									￥<view class="price-big">30</view>
								</view>
								<view class="buy">
									抢购
								</view>
							</view>
						</view>
						<view class="cont-itemss flex">
							<view class="cont-itemss-left">
								标准洗车-SUV/MPV
							</view>
							<view class="cont-itemss-right flex">
								<view class="price flex">
									￥<view class="price-big">40</view>
								</view>
								<view class="buy">
									抢购
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="car-item" v-show="num==2">
				<!-- 内容标题 -->
				<view class="car-item-title flex">
					<view class="title-item flex">
						全部车型<image src="../../../static/cartitle.png" mode="widthFix" style="width: 30rpx;margin: 5rpx;"></image>
					</view>
					<view class="title-item flex">
						全市<image src="../../../static/cartitle.png" mode="widthFix" style="width: 30rpx;margin: 5rpx;"></image>
					</view>
					<view class="title-item flex">
						全部服务<image src="../../../static/cartitle.png" mode="widthFix" style="width: 30rpx;margin: 5rpx;"></image>
					</view>
					<view class="title-item flex">
						营业状态<image src="../../../static/cartitle.png" mode="widthFix" style="width: 30rpx;margin: 5rpx;"></image>
					</view>
				</view>
				<!-- 内容 -->
				<view class="car-item-cont">
					<!-- 内容个体 -->
					<view class="cont-item">
						<view class="cont-items flex">
							<view class="cont-items-left">
								<image src="../../../static/carcont1.png" mode="widthFix" style="width: 130rpx;border-radius: 20rpx;margin-right: 20rpx;"></image>
							</view>
							<view class="cont-items-right">
								<view class="right-title">
									人和车改
								</view>
								<view class="right-cont flex">
									<text>1.37km</text>
									<image src="../../../static/vertical2.png" mode="widthFix" style="width: 30rpx;margin-top: 5rpx;"></image>
									<text>山东省泰安市岱岳区光彩路...</text>
								</view>
							</view>
						</view>
						<view class="cont-itemss flex">
							<view class="cont-itemss-left">
								标准洗车-五座轿车
							</view>
							<view class="cont-itemss-right flex">
								<view class="price flex">
									￥<view class="price-big">30</view>
								</view>
								<view class="buy">
									抢购
								</view>
							</view>
						</view>
						<view class="cont-itemss flex">
							<view class="cont-itemss-left">
								标准洗车-SUV/MPV
							</view>
							<view class="cont-itemss-right flex">
								<view class="price flex">
									￥<view class="price-big">40</view>
								</view>
								<view class="buy">
									抢购
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="car-item" v-show="num==3">
				<!-- 内容标题 -->
				<view class="car-item-title flex">
					<view class="title-item flex">
						全部车型<image src="../../../static/cartitle.png" mode="widthFix" style="width: 30rpx;margin: 5rpx;"></image>
					</view>
					<view class="title-item flex">
						全市<image src="../../../static/cartitle.png" mode="widthFix" style="width: 30rpx;margin: 5rpx;"></image>
					</view>
					<view class="title-item flex">
						全部服务<image src="../../../static/cartitle.png" mode="widthFix" style="width: 30rpx;margin: 5rpx;"></image>
					</view>
					<view class="title-item flex">
						营业状态<image src="../../../static/cartitle.png" mode="widthFix" style="width: 30rpx;margin: 5rpx;"></image>
					</view>
				</view>
				<!-- 内容 -->
				<view class="car-item-cont">
					<!-- 内容个体 -->
					<view class="cont-item">
						<view class="cont-items flex">
							<view class="cont-items-left">
								<image src="../../../static/carcont2.png" mode="widthFix" style="width: 130rpx;border-radius: 20rpx;margin-right: 20rpx;"></image>
							</view>
							<view class="cont-items-right">
								<view class="right-title">
									泰林汽车服务
								</view>
								<view class="right-cont flex">
									<text>1.51km</text>
									<image src="../../../static/vertical2.png" mode="widthFix" style="width: 30rpx;margin-top: 5rpx;"></image>
									<text>山东省泰安市岱岳区新湖街...</text>
								</view>
							</view>
						</view>
						<view class="cont-itemss flex">
							<view class="cont-itemss-left">
								玻璃水（现场添加，不课带...
							</view>
							<view class="cont-itemss-right flex">
								<view class="price flex">
									￥<view class="price-big">15</view>
								</view>
								<view class="buy">
									抢购
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				num:1,
				titlenum:0,
				titlenum2:0,
				titlenum3:0,
				titlenum4:0,
				
			}
		},
		methods: {

		}
	}
</script>

<style scoped>
	@import url(car.css);
</style>